<!--仿真详情-->
<template>
  <div class="detailsClass">
    <div class="topClass">
      <a-page-header
        @click="hearderClick"
        class="headerClass"
        title="返回上一级"
        @back="hearderClick"
      />
    </div>
    <div class="bottomClass" >
      <div class="bottomClass1"  v-html="showHtml"></div>
      <div class="bottomClass2" v-if="accessory.length>0">附件下载</div>
      <template v-for="(item,index) in accessory" :key="item">
        <div class="bottomClass3" >{{index+1}}.{{item.eaName}}</div>
      </template>
    </div>
    <div style="width: 80%; height: 50px;"></div>
  </div>
</template>
<script>
import {defineComponent, ref} from 'vue';
import router from "@/route";
import {useRouter} from 'vue-router';
import {useRoute} from 'vue-router';
import {detailsOfIndividualExperiments, filtrate, viewDetails} from "@/api/module/experiment";

export default defineComponent({
  setup() {
    // 获取父组件传过来的ID
    const routers = useRoute();
    const id = JSON.parse(routers.query.id);
    const showHtml = ref('')
    const accessory = ref([])
    // 返回上一级
    const hearderClick = () => {
      router.go(-1)
    }
    const getDateList = () => {
      viewDetails({"id": id}).then((response) => {
        showHtml.value = response.data.ebContent
        accessory.value = response.data.experimentAccessoryList
      })
    }
    getDateList()
    return {
      hearderClick,
      showHtml,
      accessory,
    }
  }

});
</script>
<style >
.detailsClass {
  width: 100%;
  height: 100%;
  float: left;
}

.topClass {
  /*style="border: 1px solid rgb(235, 237, 240)"*/
  width: 80%;
  margin-left: 10%;
  background-color: white;
  margin-top: 1%;
}

.headerClass {
  width: 13%;
}

.headerClass:hover {
  cursor: pointer;
}


.bottomClass {
  width: 80%;
  margin-left: 10%;
  background-color: white;
  margin-top: 2%;
  font-size: 20px;
}



.bottomClass1 {
  width: 100%;
  background-color: white;
  font-size: 20px;
  max-width: 100%;
}
.bottomClass1 img {
  border-style: none;
   width: 100%;
}
.bottomClass1 video {
  border-style: none;
  width: 100%;
}

.bottomClass2 {
  width: 100%;
  margin-top: 3%;
  background-color: white;
  font-size: 15px;
}
.bottomClass3 {
  width: 100%;
  color: #b3d4fc;
  font-size: 15px;
  cursor: pointer;
}
</style>
